<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滑动验证</title>

  <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
  <script src="../js/uni.webview.1.5.4.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #box {
      position: relative;
      z-index: 9;
      width: 100vw;
      height: 100vh;
    }

    #mask {
      position: absolute;
      z-index: 99;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.3);
    }

    #nc {
      position: absolute;
      z-index: 999;
      width: 300px;
      top: 50%;
      left: 50%;
      right: 50%;
      transform: translate(-50%, -50%) scale(1);
      border-radius: 52px !important;
      overflow: hidden;
      transition: all 0.2s;
    }

    #nc,
    .nc_wrapper,
    .nc_scale,
    .nc-lang-cnt {
      height: 40px !important;
      line-height: 40px !important;
    }

    .nc-lang-cnt {
      margin-right: 4px !important;
    }

    .btn_slide,
    .scale_text {
      line-height: 40px !important;
    }

    .nc_iconfont {
      height: 96% !important;
    }
  </style>
</head>

<body>

  <div id="box">
    <div id="mask"></div>
    <div id="nc"></div>
  </div>

  <script>
    let wv = {}, nc = {};

    document.getElementById("mask").addEventListener("click", (e) => {
      wv.hide?.();
    });

    document.addEventListener('plusready', () => {
      wv = plus.webview.currentWebview();
      // 阿里云滑动验证  
      window.AWSC.use('nc', (state, module) => {
        nc = module.init({
          appkey: wv.appkey,
          scene: wv.scene,
          renderTo: 'nc',
          success(data) {
            uni.postMessage({ data });
            wv.hide();
            nc.reset();
          },
          fail(failCode) { },
          error(errorCode) { }
        });
        nc.reset();
      })
    });

  </script>
</body>

</html>